<template>

    <div class="patrolEvaluationModal">
        <div class="modalCloseMask" @click="cancel"></div>
        <div>
            <div class="d-inline-block border-bottom-light-theme mb-8 text-size-18">
                巡逻评价
            </div>
        </div>
        <!--1336  150   136-->
        <div class="flexBetween mt-14">
            <div class="gradientLine2 flex-no-zoom" style="height: 250px"></div>
            <div class="w-100">
                <div class="d-flex px-14" style="background-color: #2188C7">
                    <div class="patrolEvaluationDetailTableTd" style="width: 180px"></div>
                    <div class="patrolEvaluationDetailTableTd">路段时空点总数</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段时空点总数</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段占比</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段时空点巡逻覆盖数</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段巡逻覆盖率</div>
                    <div class="patrolEvaluationDetailTableTd">总巡逻时长</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段巡逻时长</div>
                    <div class="patrolEvaluationDetailTableTd">高风险路段巡逻时长占比</div>
                </div>
                <div style="height: 200px;overflow-y: auto" class="noScrollBar">
                    <div class="patrolEvaluationDetailTableTr" v-for="(item,i) in dataPatrolEvaluationDetailTable"
                         :key="i" :class="{'active':item == activeTable }" @click="searchTr(item)">
                        <div class="patrolEvaluationDetailTableTd" style="text-align:left;width: 180px">
                            {{item.time}}
                        </div>
                        <div class="patrolEvaluationDetailTableTd">{{item.spaceTimeNum}}</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskSpaceNum}}</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskSectionRate|rateFormat}}%</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskPatrolNum}}</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskPatrolCoverageRate|rateFormat}}%</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.patrolTimeLong}}</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskPatrolTimeLong}}</div>
                        <div class="patrolEvaluationDetailTableTd">{{item.highRiskTimeRate|rateFormat}}%</div>
                    </div>
                </div>
            </div>
            <div class="gradientLine2 flex-no-zoom" style="height: 250px"></div>
        </div>

        <div class="mt-20">
            <div>
                <div class="d-flex text-size-18">
                    <div class="patrolEvaluationTab" :class="{'active':patrolEvaluationTab==0}"
                         @click="switchPatrolTab(0)">高风险时段时空分布
                    </div>
                    <div class="patrolEvaluationTab" :class="{'active':patrolEvaluationTab==1}"
                         @click="switchPatrolTab(1)">高风险路段巡逻覆盖率
                    </div>
                </div>
                <div class="gradientLine3"></div>
            </div>
            <div v-show="patrolEvaluationTab==0">
                <div class="flexBetween my-10">
                    <div class="flexCenterCenter">
                        <div class="mr-6">高风险路段时空占比</div>
                        <div style="border:1px solid #4990e9;border-radius: 100px;padding:1px;width:300px">
                            <div style="background-color:#F69037;border-radius: 100px;height:6px;"
                                 :style="{width:activeTable.highRiskSectionRate*100+'%'}"></div>
                        </div>
                        <div class="text-ff8244 ml-8">
                            <span>{{activeTable.highRiskSectionRate|rateFormat}}</span>
                            <span>%</span>
                        </div>
                    </div>
                    <div class="flexCenter">
                        <div style="width: 14px;height:14px;background-color: #ff8244"></div>
                        <div class="ml-6 mr-18">高风险</div>

                        <div style="width: 14px;height:14px;background-color: #ffce4b"></div>
                        <div class="ml-6 mr-18">中风险</div>

                        <div style="width: 14px;height:14px;background-color: #fffd84"></div>
                        <div class="ml-6 mr-18">低风险</div>

                    </div>
                </div>

                <div>
                    <div style="background-color: #2188C7" class="py-6 mb-4 d-flex">
                        <div style="width:214px;"></div>
                        <div class="d-flex">
                            <div v-for="i in 24" :key="i" class="px-6 text-center" style="width:48px;">
                                {{i>9?i:"0"+i}}
                            </div>
                        </div>
                    </div>
                    <!--1366   48*24 = 1152  剩余214  上下行60-->
                    <div style="height:361px;overflow-y: auto">
                        <div v-for="(item,i) in dataPatrolEvaluationDetailskfb" :key="i">
                            <div class="d-flex w-100">
                                <div class="rowBox">
                                    <div>
                                        {{item.name}}
                                    </div>
                                </div>
                                <div>
                                    <div v-for="(skfbItem,j) in item.skfb" :key="j" class="d-flex">
                                        <div class="upDownBox">
                                            {{j==0?'上行':'下行'}}
                                        </div>

                                        <template v-for="(flag,t) in skfbItem">
                                            <div v-if="flag.level==0"
                                                 :class="{'emphasize':flag.cover,'rightLast':t==(skfbItem.length-1),'bottomLast':j==1&&i==(securityRiskAnalysisLen-1)}"
                                                 class="warningBox warning0">
                                            </div>
                                            <a-popover v-else trigger="click" :key="t">
                                                <div slot="content">
                                                    <div>历史分析：近1年事故数{{flag.num}}起</div>
                                                    <div>事件分析：</div>
                                                    <div>天气分析：</div>

                                                </div>

                                                <div
                                                        :class="{'emphasize':flag.cover,'warning1':flag.level==1,'warning2':flag.level==2,'warning3':flag.level==3,'rightLast':t==(skfbItem.length-1),'bottomLast':j==1&&i==(securityRiskAnalysisLen-1)}"
                                                        class="warningBox">
                                                </div>
                                            </a-popover>
                                        </template>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <!--1336-->
            <div v-show="patrolEvaluationTab==1">
                <div class="d-flex">
                    <div class="d-flex">
                        <div style="width:666px" class="pr-14 flex-no-zoom">
                            <div class="flexCenter my-10">
                                <div class="mr-6">高风险路段巡逻覆盖率</div>
                                <div style="border:1px solid #4990e9;border-radius: 100px;padding:1px;width:300px">
                                    <div style="background-color:#F69037;border-radius: 100px;height:6px;"
                                         :style="{width:activeTable.highRiskPatrolCoverageRate*100+'%'}"></div>
                                </div>
                                <div class="text-ff8244 ml-8">
                                    <span>{{activeTable.highRiskPatrolCoverageRate|rateFormat}}</span>
                                    <span>%</span>
                                </div>
                            </div>


                            <div style="height:420px;overflow-y: auto">
                                <div v-for="(item,i) in dataPatrolEvaluationDetailgfxfgl" :key="i">
                                    <div class="d-flex w-100">
                                        <div class="rowBox">
                                            <div>
                                                {{item.name}}
                                            </div>
                                        </div>
                                        <div>
                                            <div v-for="(skfbItem,j) in item.skfb" :key="j" class="d-flex">
                                                <div class="upDownBox">
                                                    {{j==0?'上行':'下行'}}
                                                </div>
                                                <div style="height:30px;width:420px;"
                                                     class="d-flex position-relative py-8">
                                                    <!--420/8 = 52.5-->
                                                    <div class="d-flex position-relative" style="flex-shrink: 0">
                                                        <div v-for="(d,i) in gradientColor2 = getGradientColorArray2(skfbItem.mileage,skfbItem.totalmileage,52)"
                                                             :key="i"
                                                             style="height:14px;width:6px;margin-right:2px;"
                                                             :style="{backgroundColor: d}"></div>

                                                        <div style="background-color: white;width: 3px;height:16px;margin:-1px 0;box-shadow: 0 0 6px 1px rgba(255,255,255,.5)"></div>
                                                    </div>

                                                    <div style="height:14px;background-color: rgba(18, 141, 234, .3);width: 100%;line-height: 14px;position:relative">
                                                        <div class="font-weight-bold"
                                                             style="line-height: 1.2;height:14px;"
                                                             :style="getStyleObj(gradientColor2.length,skfbItem.mileage)">
                                                            {{skfbItem.mileage}}
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="text-ff8244 font-weight-bold text-right"
                                                     style="line-height: 30px;width:30px">{{skfbItem.totalmileage}}
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="gradientLine2px" style="height:460px"></div>

                        <div style="width:666px" class="pl-14 flex-no-zoom">

                            <div class="flexCenter my-10">
                                <div class="mr-6">高风险路段巡逻时长占比</div>
                                <div style="border:1px solid #4990e9;border-radius: 100px;padding:1px;width:300px">
                                    <div style="background-color:#F0B73C;border-radius: 100px;height:6px;"
                                         :style="{width:activeTable.highRiskTimeRate*100+'%'}"></div>
                                </div>
                                <div class="text-fab96d ml-8">
                                    <span>{{activeTable.highRiskTimeRate|rateFormat}}</span>
                                    <span>%</span>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end align-items-center mb-10">
                                <div style="width:18px;height:16px;background: linear-gradient( rgb(245,187,58) 50%,rgba(245,187,58,0));"></div>
                                <div class="ml-6 mr-24">高风险路段巡逻时长</div>
                                <div style="width:18px;height:16px;background: linear-gradient( rgba(60,197,248,1) 50%,rgba(60,197,248,0));"></div>
                                <div class="ml-6">非高风险路段巡逻时长</div>
                            </div>

                            <div id="highRiskRoadSectionCategoryBox">

                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</template>

<script>
    import {
        getHighRiskRoadSectionCategory, getPatrolEvaluationDetailgfxfgl,
        getPatrolEvaluationDetailskfb,
        getPatrolEvaluationDetailTable
    } from "../../common/api";
    import {echartsTowCategoryOptionFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import {gradientColorArray} from "../../utils/hex-to-decimal";
    import * as moment from 'moment';
    import {rateFormat} from "../../common/filters";


    export default {
        name: "patrolEvaluationModal",
        filters: {rateFormat},
        data() {
            return {
                patrolEvaluationTab: 0,

                dataPatrolEvaluationDetailTable: [],// 模态框巡逻评价table

                dataPatrolEvaluationDetailskfb: [],// 高风险时段时空分布

                dataHighRiskRoadSectionCategory: {},

                dataPatrolEvaluationDetailgfxfgl: [],// 高速运行概括数据


                echartsHighRiskRoadSectionCategoryChart: null, //


                timeRange: [],
                activeTable: {},


            }
        }, methods: {
            cancel() {
                this.$emit("cancel")
            },

            switchPatrolTab(tabFlag) {
                this.patrolEvaluationTab = tabFlag;
            },
            getGradientColorArray2(pre1,pre, maxNub) {
                var presend = 0;
                if(pre == 0){
                    presend = 0
                }else{
                    presend = pre1/pre;
                }
                var step = Math.round(presend * maxNub);
                return gradientColorArray("#1bb0f6", "#f08a5d", step)
            },

            biuldHighRiskRoadSectionCategoryChart(reqBody) {

                getHighRiskRoadSectionCategory(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.dataHighRiskRoadSectionCategory.timeList = [];
                        this.dataHighRiskRoadSectionCategory.highTimeLongs = [];
                        this.dataHighRiskRoadSectionCategory.timeLongs = [];
                        res.data.forEach(v => {
                            this.dataHighRiskRoadSectionCategory.timeList.push(v.countTime);
                            this.dataHighRiskRoadSectionCategory.highTimeLongs.push(v.highTimeLong);
                            this.dataHighRiskRoadSectionCategory.timeLongs.push(v.timeLong);
                        })

                        this.echartsHighRiskRoadSectionCategoryChart = echarts.init(document.getElementById('highRiskRoadSectionCategoryBox'));

                        var xdata = this.dataHighRiskRoadSectionCategory.timeList;
                        var datas = [{
                            data: this.dataHighRiskRoadSectionCategory.highTimeLongs,
                            name: '高风险',
                            color: '#F6BC3C'
                        }, {data: this.dataHighRiskRoadSectionCategory.timeLongs, name: '非高风险', color: '#3AC4F8'}];
                        var option = echartsTowCategoryOptionFactory(xdata, datas)
                        this.echartsHighRiskRoadSectionCategoryChart.setOption(option);
                    }
                })
            },


            searchTr(item) {
                // if (item.id === undefined) {
                //     return;
                // }
                // console.log(item);
                this.activeTable = item;

                var reqBody = {};
                reqBody.startTime = moment(item.beginTime).format("YYYY-MM-DD HH:mm:ss");
                reqBody.endTime = moment(item.endTime).format("YYYY-MM-DD HH:mm:ss");

                getPatrolEvaluationDetailskfb(reqBody).then((res) => {
                    if (res.isSuccess) {
                        // console.log(res)
                        this.dataPatrolEvaluationDetailskfb = res.data;


                    }
                })

                //巡逻评价详情  高风险路段时空分布
                // Promise.all([getHighRiskSection(), getPatrolEvaluationDetailskfb(reqBody)]).then(([roads, res]) => {
                //     if (roads.isSuccess && res.isSuccess) {
                //         var roads = roads.data;
                //         var details = res.data;
                //
                //         roads.forEach(v => {
                //             v.skfb = [
                //                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                //                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                //             ];
                //             details.forEach(w => {
                //                 if (v.id == w.sectionid) {
                //                     if (w.drivingdirection == 0) {
                //                         v.skfb[0][w.timeinterval * 1] = w.risklevel
                //                     } else if (w.drivingdirection == 1) {
                //                         v.skfb[1][w.timeinterval * 1] = w.risklevel
                //                     }
                //                 }
                //             })
                //         })
                //
                //
                //         this.dataPatrolEvaluationDetailskfb = roads;
                //     }
                // })


                getPatrolEvaluationDetailgfxfgl(reqBody).then(res => { // 高风险路段巡逻覆盖率
                    if (res.isSuccess) {
                        // {road: "沈海K580", skfb: [{all: 100, doN: 23}, {all: 26, doN: 1}]},
                        //{sectionid:  1, mileage: 23, direction: 0, name: '沈海K580', totalmileage: 100,countTime: "统计时间",timeLong: '非高风险巡逻时长',highTimeLong: '高风险巡逻时长'},
                        var resData = res.data;
                        var ids = [];

                        resData.forEach(v => {
                            if (ids.indexOf(v.sectionid) == -1) {
                                ids.push(v.sectionid)
                            }
                        });
                        console.log(ids);
                        var datas = [];
                        ids.forEach((v) => {
                            var road = {skfb: [{mileage: 0, totalmileage: 1}, {mileage: 0, totalmileage: 1}]};
                            resData.forEach(w => {
                                if(!w.mileage){
                                    w.mileage = 0
                                }
                                if(!w.totalmileage){
                                    w.totalmileage = 0
                                }
                                if (v == w.sectionid) {
                                    road.name = w.name;
                                    if (w.direction == 0) {
                                        road.skfb[0] = w
                                    } else if (w.direction == 1) {
                                        road.skfb[1] = w
                                    }
                                }
                            })
                            datas.push(road);
                        });
                        this.dataPatrolEvaluationDetailgfxfgl = datas;
                    }
                });

                this.biuldHighRiskRoadSectionCategoryChart(reqBody);
            },


            doSearch(range) {
                // console.log('doSearch');
                // console.log(range);
                this.timeRange = range;
                var reqBox = {startTime: range[0], endTime: range[1]};
                getPatrolEvaluationDetailTable(reqBox).then(res => { //模态框巡逻评价table
                    if (res.isSuccess) {
                        if (res.data.length > 1) { //大于1条算合计
                            var sumData = {
                                spaceTimeNum: 0,
                                highRiskSpaceNum: 0,
                                highRiskSectionRate: 0,
                                highRiskPatrolNum: 0,
                                highRiskPatrolCoverageRate: 0,
                                patroltimelong: 0,
                                highRiskPatrolTimeLong: 0,
                                highRiskTimeRate: 0
                            };
                            var keys = Object.keys(sumData);
                            res.data.forEach((v) => {
                                v.time = v.beginTime + '～' + v.endTime;
                                keys.forEach(key => {
                                    sumData[key] = sumData[key]*1 + v[key]*1
                                });
                            });
                            var len = res.data.length;
                            sumData.highRiskSectionRate = sumData.highRiskSectionRate / len;
                            sumData.highRiskPatrolCoverageRate = sumData.highRiskPatrolCoverageRate / len;
                            sumData.highRiskTimeRate = sumData.highRiskTimeRate / len;
                            sumData.time = "合计";
                            res.data.push(sumData);
                        } else {
                            res.data.forEach((v) => {
                                v.time = v.beginTime + '~' + v.endTime;
                            });
                        }


                        this.dataPatrolEvaluationDetailTable = res.data;
                        this.activeTable = this.dataPatrolEvaluationDetailTable[0];


                        this.searchTr(this.activeTable);


                    }
                })


            },
            getStyleObj(no, nod) {
                var strL = (nod + "").length + 1;
                if (no < strL) {
                    return {'margin-left': '4px'}
                } else {
                    var w = 0;
                    //6
                    if (no - strL < 7) {
                        w = no * 8 + 3
                    } else {
                        w = (strL + 6) * 8 + 3
                    }

                    return {
                        'margin-left': -w + 'px',
                        'width': (w - 3) + 'px',
                        background: 'linear-gradient(90deg,rgba(238,140,94, 0) ,rgb(238,140,94) 90%)',
                        textAlign: 'right',
                        paddingRight: '4px'
                    }
                }

            },


        },
        mounted() {
        },
        beforeDestroy() {
            this.echartsHighRiskRoadSectionCategoryChart && this.echartsHighRiskRoadSectionCategoryChart.clear();
        }
    }
</script>

<style scoped>


    .patrolEvaluationModal {
        position: absolute;
        z-index: 101;
        width: 1406px;
        height: 885px;
        left: 50%;
        top: 8%;
        margin-left: -703px;
        padding: 40px 40px 25px 30px;
        background-image: url("../../assets/img/patrolEvaluation/bgPatrolEvaluation.png");
    }

    .modalCloseMask {
        width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        right: 2px;
        top: 4px;
    }

    .patrolEvaluationDetailTableTr {
        display: flex;
        /*padding:0 14px;*/
    }

    .patrolEvaluationDetailTableTr:hover {
        background-color: rgba(33, 136, 199, 0.2);
    }

    .patrolEvaluationDetailTableTr.active {
        background-color: rgba(33, 136, 199, 0.6);
    }

    .patrolEvaluationDetailTableTd {
        width: 140px;
        flex-shrink: 0;
        text-align: center;
        padding: 6px 14px;
    }

    .patrolEvaluationTab {
        padding: 4px 30px;
        cursor: pointer;
        /*line-height: 1;*/
        color: #4290c7;
    }

    .patrolEvaluationTab.active {
        background: linear-gradient(90deg, rgba(47, 219, 236, 0) 10%, rgba(47, 219, 236, .7), rgba(47, 219, 236, 0) 90%);
        /*font-weight: bold;*/
        color: white;
    }

    .rowBox {
        vertical-align: center;
        width: 154px;
        background-color: rgba(13, 93, 173, 0.8);
        /*line-height: 58px;*/
        text-align: center;
        padding: 0 14px;
        border-right: 1px solid;
        border-top: 1px solid;
        border-color: #083868;
        /*flex-shrink: 0;*/
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upDownBox {
        background-color: rgba(13, 93, 173, 0.8);
        width: 50px;
        text-align: center;
        line-height: 29px;
        margin-right: 10px;
        border-top: 1px solid;
        border-color: #083868

    }

    .warningBox {
        width: 48px;
        height: 30px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-color: rgba(106, 189, 255, 0.7);
        flex-shrink: 0;
    }

    .warningBox.rightLast {
        border-right: 1px solid rgba(106, 189, 255, 0.7);
    }

    .warningBox.bottomLast {
        border-bottom: 1px solid rgba(106, 189, 255, 0.7);
    }

    /*.warningBox.warning {*/
    /*background-color: #F69037;*/
    /*}*/

    .warningBox.warning1 {
        background-color: #fffd84;
    }

    .warningBox.warning2 {
        background-color: #ffce4b;
    }

    .warningBox.warning3 {
        background-color: #ff8244;
    }

    #highRiskRoadSectionCategoryBox {
        width: 650px;
        height: 380px;
    }

    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }




</style>
